// 创建类组件模板代码
import React, { useEffect, useState } from "react";
import "./index.css";
import { withRouter } from "react-router-dom";
import { getUserInfo} from "../../api/userinfo"

import QRCodeAlert from "../../components/QRcode_Alert";

function Mine(props) {
    const [userInfo, setUser] = useState('hahhah')
    const getUser = async ()=>{
        let res = await getUserInfo({ phone: '18234824645' })
        setUser(res)
    }
    useEffect(() => {
        getUser()
    }, [])
    console.log(userInfo);
    return (
        <div className="box-mine">
            <div className="mine">
                <div className="mine-vip">
                    <h1>会员中心</h1>
                </div>
                <div className="mine-bottom">
                    <div className="left"
                        onClick={() => {
                            props.history.push("/userInfo")
                        }}
                    >
                        <img src="/img/about/鱼酷.png" alt="" />
                        {/* <input type="file" /> */}
                        <div className="left-name">
                            <p>{userInfo[0].name}</p>


                            <p>
                                <span>鱼宝</span>
                            </p>
                        </div>

                    </div>
                    <div className="right">
                        <QRCodeAlert></QRCodeAlert>
                    </div>
                </div>
            </div>
            <div className="list">
                <div className="list-coupon">

                </div>
                <div className="list-dataWrap">
                    <div className="list-data" onClick={() => props.history.push("/Layout/Orders")}>
                        <div className="left">
                            <span className="iconfont">&#xe6bd;</span>
                            <span>订单</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data" onClick={() => props.history.push("/Car")}>
                        <div className="left">
                            <span className="iconfont">&#xe611;</span>
                            <span>优惠券</span>
                        </div>
                        <div className="right">
                            <span>可用{userInfo[0].coupons}张</span>
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data" onClick={() => props.history.push("/Shop")}>
                        <div className="left">
                            <span className="iconfont">&#xe6be;</span>
                            <span>鱼酷商城</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data" onClick={() => {
                        props.history.push("/Payment")
                    }}>
                        <div className="left">
                            <span className="iconfont">&#xe6be;</span>
                            <span>付费卷包</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data" onClick={() => {
                        props.history.push("/Exchange")
                    }}>
                        <div className="left">
                            <span className="iconfont">&#x100cf;</span>
                            <span>兑换中心</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-grey"></div>
                    <div className="list-vip"
                        onClick={() => props.history.push("/Explain")}>
                        <div className="left">
                            <span className="iconfont">&#xe731;</span>
                            <span>会员权益中心</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data"
                        onClick={() => props.history.push("/userinfo")}>
                        <div className="left">
                            <span className="iconfont">&#xe604;</span>
                            <span>个人资料</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-data"
                        onClick={() => props.history.push("/Details")}>
                        <div className="left">
                            <span className="iconfont">&#xe8b0;</span>
                            <span >关于鱼酷</span>
                        </div>
                        <div className="right">
                            <img src="/svg/右箭头.svg" alt=""></img>
                        </div>
                    </div>
                    <div className="list-bottom">
                    </div>
                </div>

            </div>
        </div>


    )

}
export default withRouter(Mine)